[React] 함수형 컴포넌트에서 StateHook 사용하는 방법과 예제

React에서 state hook을 사용하는 방법에 대하여 알아봅니다.

# React state hook 알아보기

react 16.8 이 후 부터 사용 가능한 react hook은 class형 컴포넌트가 아닌 경우에도 state를 사용한 상태 관리를 쉽게 사용할 수 있게 도와주는 강력한 기능입니다. 만약 클래스가 아닌 함수형 컴포넌트의 경우 stateless한 컴포넌트이지만 훅을 사용하여 state를 생성하고 사용 가능합니다. 간단한 사용 방법은 아래와 같습니다.

const [myValue, setValue] = useState(초기값);

더 자세한 내용은 아래에서 알아봅니다.

! state hook 사용하는 방법

어떻게 state hook을 사용하는지 알아봅니다. 사용 방법은 아주 간단하며 useState()를 사용해 선언합니다. 이때 배열을 사용하며 첫 번째는 state가 저장될 이름을 두 번째는 값을 업데이트 할 메소드가 위치하게 됩니다.

위 코드는 isActive와 setActive()를 state hook으로 사용한 코드입니다. 클래스에서 setState()를 사용하는 것과 거의 비슷합니다. 다만 선언할 때 하나가 아닌 두 개의 값을 사용하는 것이 차이점입니다. 이제 isActive를 state로 사용하고 불러올 수 있습니다. 또한 값을 변경, 업데이트 하기 위해서는 setAcitve('변경할 값')를 사용할 수 있습니다.

! state hook 예제 보기

아래에서 간단한 예제를 만들어 알아봅니다. state hook을 함수형 컴포넌트에 사용하고 버튼을 누르면 state 값을 변경합니다. 이때 ChildComponent를 보여주거나 사라지도록 만드는 간단한 예제를 구현하려고 합니다.

예제는 모두 완성되었습니다. 보시는 것 처럼 this를 사용하지 않고 값만 넘기면 되므로 더 간단하게 state를 사용할 수 있습니다. 그럼 순대로 하나씩 알아보겠습니다.


@ react state hook 예제 설명
먼저 useState를 사용하기 위해서 react에 import를 사용하여 선언하였습니다..

다음으로 가장 주요한 부분입니다. const를 사용하여 아래와 같이 값을 가져올 변수와 업데이트 할 함수를 마치 getter, setter처럼 나란히 선언합니다.

이제 isActive 값은 함수형 컴포넌트에서 state로 사용이 가능합니다. 또한 setActive()를 사용하여 isActive의 값을 업데이트 할 수 있죠. 맨 처음 useState()를 사용하여 선언할 때 초기값을 설정할 수 있으며 위에서는 false를 사용하였습니다. 즉 초기값은 false가 저장되었습니다.

다음으로 버튼 요소를 추가하였으며 클릭할 경우 setActive() 함수를 호출하며 상태값이 업데이트 됩니다. 이때 업데이트 값은 !isActive로 현재 isActive의 반대값이 새롭게 선언됩니다. 즉 토글과 같이 동작합니다.

! state hook의 값을 선언할 때 함수를 사용하는 방법

state hook을 사용하는 다른 코드들을 살펴보면 값을 업데이트 할 경우 인자에 함수를 전달하는 경우가 있습니다. 예를들어 아래의 두 번째 예제와 같이 사용되기도 합니다.

그렇다면 함수를 사용하는 경우 무엇이 다를까요? 함수를 사용하게 되면 첫 번째 인자로 prev와 같이 이 전에 저장된 값을 전달받을 수 있습니다. 즉 새로운 값을 저장할 때 이전에 저장된 값도 필요한 경우 함수를 사용하면 더 간단하게 코드 구현이 가능합니다. 자주 사용되므로 알아두시면 좋습니다.

여기까지 state hook 예제의 모든 과정을 알아봤습니다.